<template>
  <div class="mainBar">
    <div class="navBar" v-bind:class="{ navBarWhite: whiteStyle }">
      <div class="statusBar"></div>
      <van-nav-bar
        :title="title"
        placeholder
        :border="false"
        @click-left="onClickLeft"
        @click-right="onClickRight"
        class="vanNavBar"
      >
        <template #left>
          <slot v-if="$slots.left" name="left"></slot>
          <!-- <svg-icon v-if="back" name="back"></svg-icon> -->
          <svg-icon v-show="back" :name="whiteStyle ? 'back-black' : 'back'" class="iconfont_back"></svg-icon>
        </template>
        <template #right>
          <slot></slot>
        </template>
      </van-nav-bar>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  props: {
    title: {
      type: String, //navbar标题
      default: ''
    },
    back: {
      type: Boolean, //是否显示返回箭头
      default: true
    },
    whiteStyle: {
      type: Boolean, //是否使用默认样式
      default: false
    },
    beforeBack: Function // 返回前回调
  },
  setup(props, { emit }) {
    const router = useRouter()

    const onClickLeft = () => {
      if (typeof props.beforeBack === 'function') {
        props.beforeBack(back)
      } else {
        back()
      }
    }
    const back = () => {
      //返回
      if (props.back) {
        router.go(-1)
      }
    }
    const onClickRight = () => {
      //调用父组件事件
      emit('barRight')
    }
    return {
      onClickLeft,
      onClickRight
    }
  }
})
</script>

<style lang="scss">
@import '@/style/variables.scss';

.mainBar {
  height: 88px;
}
.navBar {
  background: linear-gradient(180deg, #74cdff 0%, #409eff 100%);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  .statusBar {
    height: 44px;
    width: 100%;
  }
  .van-nav-bar {
    background-color: transparent;
  }
  .van-nav-bar .van-icon {
    color: #fff;
  }
  .van-nav-bar__content {
    height: 44px;
  }
  .van-nav-bar__title {
    color: #fff;
    font-size: 16px;
  }
  .van-nav-bar__right {
    color: #fff;
  }
  .van-nav-bar--fixed {
    z-index: 1000;
  }
  .svg-icon {
    width: 20px;
    height: 20px;
  }
}
.navBarWhite {
  background: #fff;
  .van-nav-bar .van-icon {
    color: $color-text-primary;
  }
  .van-nav-bar__title {
    color: $color-text-primary;
  }
  .van-nav-bar__right {
    color: $color-text-primary;
  }
}
</style>
